<template>
	<view class="cartTabbar">
		<view class="ul">
			<view class="li" :class="{'select': index == 1}"  @click="tabClick(1)">首页</view>
			<view class="li" :class="{'select': index == 2}"  @click="tabClick(2)">会员</view>
			<view class="li" :class="{'select': index == 4}"  @click="tabClick(4)">我的</view>
		</view>
		<view class="ul1" :class="{'red' : priceAmount>0}">
			<view class="li">¥{{priceAmount}}</view>
			<view class="li" @click="toOrderConfirm">去结算</view>
		</view>
	</view>
</template>

<script>
	import { mapActions } from 'vuex'
	export default {
		props:[
			'index',
			'priceAmount',
			'productList'
		],
		data() {
			return {
			};
		},
		methods: {
			...mapActions(['orderConfirm']),
			
			toOrderConfirm(){
				this.orderConfirm(this.productList);
				uni.navigateTo({
						url: '/pages/product/orderConfirm/orderConfirm'
				});
			},
			tabClick(i){
				if(i == 1){
					uni.redirectTo({
							url: '/pages/index/index/index'
					});
				}
				if(i== 2){
					uni.redirectTo({
							url: '/pages/member/member/member'
					});
				}
				if(i == 4){
					uni.redirectTo({
							url: '/pages/my/my/my'
					});
				}
			}
		}
	}
</script>

<style>
	.cartTabbar {
		width: 690upx;
		height: 100upx;
		position: fixed;
		bottom: 50upx;
		color: #fff;
		z-index: 99;
		font-size: 26upx;
		left: 30upx;
	}
	.cartTabbar .ul {
		width: 414upx;
		height: 100upx;
		background-color: #4C4C4C;
		box-shadow:0px 9px 8px 0px #CCCCCC;
		float: left;
		display: flex;
		border-radius: 6upx;
	}
	.cartTabbar .ul1 {
		width: 256upx;
		height: 100upx;
		background-color: #BFBFBF;
		box-shadow:0px 9px 8px 0px #CCCCCC;
		float: right;
		display: flex;
		border-radius: 6upx;
	}
	.cartTabbar .ul .li , .cartTabbar .ul1 .li{
		flex: 1;
		line-height: 100upx;
		text-align: center;
		color: #B6B6B6;
	}
	.cartTabbar .ul1 .li {
		color: #fff;
	}
	.cartTabbar .ul .li.select {
		color: #fff;
		font-size: 26upx;
	}
	.cartTabbar .ul1.red {
		background-color: #F52A4C;
	}
</style>
